<script setup lang="jsx">
import Add from './components/add'
import { getOption } from '@/api/public'
import api from "./api";
import VImport from '@/components/VImport'
import { ElMessage, ElMessageBox } from "element-plus";

const tableRef = ref()
const loadings = reactive({})
const options = ref({})
const addRef = ref()
const logRef = ref()
const viewImageRef = ref()

Promise.all([
  getOption({ type: 'patent' }).then(res => res.data),
  Promise.resolve({ test: [{ label: '没有数据', value: 1 }] })
]).then(res => {
  options.value = res.reduce((pre, cur) => (((pre = { ...pre, ...cur }), pre)), {})
})

const query = () => {
  tableRef?.value.query()
}

const handleDelete = patent_ids => {
  ElMessageBox.confirm('是否确认删除？', '删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(() => {
    api.delete({ patent_ids }).then(res => {
      ElMessage({ type: 'success', message: '操作成功', })
      query()
    })
  }).catch(() => {
    ElMessage({ type: 'info', message: '取消操作', })
  })
}

const handleBatch = (operation) => {
  const selection = tableRef.value.$table.getCheckboxRecords()
  if (!selection.length) {
    return ElMessage.warning('请先选择行')
  }
  const patent_ids = selection.map(d => d.patent_id)
  switch (operation) {
    case 'delete':
      handleDelete(patent_ids)
      break
    default:
      break
  }
}

const handleRow = (operation, row, rowIndex) => {
  const { patent_id } = row
  switch (operation) {
    case 'edit':
      addRef?.value.open(patent_id)
      break
    case 'delete':
      handleDelete([patent_id])
      break
    case 'log':
      logRef?.value.open({ type: 'patent', record_id: patent_id })
      break
    default:
      break
  }
}

const tableOptions = reactive({
  rowConfig: { height: 72 },
  showHeaderOverflow: false,
  formConfig: {
    data: {
      input: { type: 'patent_name', value: '' }, // 组合
      dateRange: { type: 'patent_expiration_date', value: [], range: true }, // 组合
    }
  },
  columns: [
    { type: 'checkbox', fixed: 'left', width: 40 },
    { type: 'seq', fixed: 'left', width: 50, slots: { header: () => '序号' } },
    { title: '专利名称', field: 'patent_name', minWidth: 140, sortable: true },
    {
      title: '产品图片', field: 'certificate_id', minWidth: 80, slots: {
        default: ({ row }) => <VImage src={row.product_image[0]} size='50px' list={[row.product_image]} />
      }
    },
    { title: '状态', field: 'trademark_status', minWidth: 80, sortable: true,slots: {
      default: ({row}) => <VText value={row.trademark_status.join('，')} />
    } },
    {
      field: 'certificate_number', minWidth: 160, slots: {
        header: [
        {title: '证书序列号', sort: 'certificate_num'},
        {title: '注册号', sort: 'registered_num'},
      ],
        default: ({ row }) => <div>
          <VText value={row.certificate_num} />
          <VText value={row.registered_num} />
        </div>
      }
    },
    { title: '地区', field: 'region', minWidth: 100, sortable: true },
    { title: '类型', field: 'trademark_type', minWidth: 100, sortable: true },
    { title: '注册产品', field: 'registered_product', minWidth: 140, sortable: true },
    { title: '日期', field: 'application_date', minWidth: 140, slots: {
      header: [
        {title: '提交申请日期', sort: 'application_date'},
        {title: '初审日期', sort: 'initial_review_date'},
        {title: '注册日期', sort: 'registration_date'},
      ],
      default: ({row}) => <div>
        <VText value={row.application_date} />
        <VText value={row.initial_review_date} />
        <VText value={row.registration_date} />
      </div>
    } },
    { title: '证书', field: 'certificate_number', minWidth: 140, slots: {
      default: ({row, rowIndex}) => <VMore key={rowIndex}>
        {{
          default: (line) => row.r_certificate_file.map(d => <div class='w-full'>
            <VText value={d.file_name} line={1} type='link' onClick={() => viewImageRef?.value.open(d.file_url)} />
          </div>)
        }}
      </VMore>
    } },
    { title: '申请人/公司', field: 'applicant_company', minWidth: 140, line: 2, sortable: true },
    { title: '代理/办理机构', field: 'agent_agency', minWidth: 140, line: 2, sortable: true },
    { title: '费用', field: 'fee', minWidth: 140, sortable: true },
    { title: '续费备注', field: 'renewal_remark', minWidth: 140 },
    {
      title: '操作', width: 110, fixed: 'right', slots: {
        default: ({ row, rowIndex }) => {
          return <div class='nm flex flex-wrap gap-1'>
            <el-button link type="primary" onClick={() => handleRow('edit', row)}>编辑</el-button>
            <el-button link type="danger" onClick={() => handleRow('delete', row, rowIndex)}>删除</el-button>
            <VButton link type="primary" onClick={() => handleRow('log', row)} class='m-0'>日志</VButton>
          </div>
        }
      }
    }
  ],
  proxyConfig: {
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page })
    }
  }
})

const handleAdd = () => {
  addRef?.value.open()
}
const handleDel = () => { }
</script>

<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <VSelect v-model="form.regions" placeholder="地区" :options="options.region" multiple collapse-tags style="min-width: 160px" />
        <VSelect v-model="form.trademark_types" placeholder="商标类型" :options="options.trademark_type" multiple collapse-tags style="min-width: 160px" />
        <VSelect v-model="form.trademark_statuses" placeholder="商标状态" :options="options.trademark_status" multiple collapse-tags style="min-width: 160px" />
        <VSelect v-model="form.agent_agencies" placeholder="代理机构" :options="options.agent_agency" multiple collapse-tags style="min-width: 160px" />
        <VSelect v-model="form.applicant_companies" placeholder="申请人/公司" :options="options.applicant_company" multiple collapse-tags style="min-width: 160px" />
        <!-- <VGroup>
          <div class="v-group-item">费用</div>
          <el-input placeholder="最小" v-model="form.fee_min" class="w-24" />
          <div class="v-group-item">-</div>
          <el-input placeholder="最大" v-model="form.fee_max" class="w-24" />
        </VGroup> -->
        <VGroup>
          <el-select v-model="form.dateRange.type" style="width: 100px">
            <el-option label="专利截止日期" value="patent_expiration_date"></el-option>
            <el-option label="申请日期" value="application_date"></el-option>
            <el-option label="初审日期" value="initial_review_date"></el-option>
            <el-option label="异议截止日期" value="opposition_deadline"></el-option>
          </el-select>
          <el-date-picker v-model="form.dateRange.value" type="daterange" value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            style="max-width: 260px" />
        </VGroup>
        <VGroup>
          <el-select v-model="form.input.type" style="width: 110px">
            <el-option label="注册号" value="registered_num"></el-option>
            <el-option label="注册产品" value="registered_product"></el-option>
            <el-option label="续费备注" value="renewal_remark"></el-option>
            <el-option label="发明人" value="inventor"></el-option>
            <el-option label="证书序列号" value="certificate_num"></el-option>
            <el-option label="专利名称" value="patent_name"></el-option>
          </el-select>
          <el-input v-model="form.input.value" clearable placeholder="请输入" class="w-60" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <VButton auth="/base/PatentInfo/add" type="primary" icon="DocumentAdd" @click="handleAdd()">新增</VButton>
        <VButton auth="/base/PatentInfo/delete" @click="handleBatch('delete')">删除</VButton>
        <VImport :tableRef="tableRef" importUrl="/v1/patent/import" downloadUrl="https://xc-base.oss-cn-shenzhen.aliyuncs.com/template/patent.xlsx" class="ml-auto" />
        <VExport auth="/base/PatentInfo/export" mainKey="patent_ids" name="patent" :tableRef="tableRef" task />
      </template>
    </VTable>
    <Add ref="addRef" :options="options" @success="query" />
    <VLog ref="logRef" />
    <ViewImage ref="viewImageRef" />
  </VPage>
</template>

<style scoped lang="scss"></style>